<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Zoomooz.js</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" href="style.css" type="text/css" media="screen">
		
		<script type="text/javascript" src="../../lib/jquery.masonry.min.js"></script>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
			   $("div,body").click(function(evt) {
					$(this).zoomTo({targetsize:0.95, duration:600, debug:true});
					evt.stopPropagation();
				});
			});
		</script>
	</head>
	<body>
	
	    <!-- the problem is caused by the first content element having
	         margin-top -->
	         
	    <div id="title1">
            First title
        </div>
	    
	</body>
</html>